<template>
  <div class="purchase-page">
    <BaseHeader :navs="navs" :activeNav="activeNav" @nav-change="activeNav = $event" />
    <div class="purchase">
      <div class="purchase-container">
        <!-- 订单号 -->
        <div class="order-number">
          订单编号：<div class="ipt">{{ orderNumber }}</div>
          <div class="copy-order-number" @click="handleCopy">复制订单号</div>
        </div>

        <!-- 支付状态 -->
        <div class="payment-status">
          <h1>待支付，剩余{{ formatTime }}</h1>
        </div>

        <!-- 订单信息 -->
        <div class="order-info">
          <div style="display: flex;justify-content: space-between;">
            <div class="order-title">订单支付</div>
            <div class="course-period">课程时间：购买{{ validity }}天有效</div>
          </div>
          <div class="course-info">
            <div>
              <div class="course-name">{{ courseName }}</div>
              <div class="validity">有效期：{{ validity }}天</div>
            </div>


            <div class="price">¥{{ price }}</div>

          </div>

        </div>

        <!-- 支付方式 -->
        <div class="payment-methods">
          <div class="method-title">订单方式</div>
          <div class="methods-grid">
            <div v-for="method in paymentMethods" :key="method.id"
              :class="['method-item', { active: selectedMethod === method.id }]"
              @click="selectPaymentMethod(method.id)">
              <img :src="method.icon" :alt="method.name">
              <span>{{ method.name }}</span>
            </div>
          </div>
        </div>

        <!-- 底部支付区域 -->
        <div class="payment-footer">
          <div class="agreement">
            <input type="checkbox" v-model="agreementChecked" id="agreement">
            <label for="agreement">
              已阅读并同意
              <span class="agreement-link">《希赛网培训说明》</span>
            </label>
          </div>
          <div class="payment-action">
            <div class="total-amount">
              应付金额：<span class="amount">¥{{ price }}</span>
            </div>
            <button class="pay-button" :disabled="!agreementChecked" @click="handlePayment">
              立即支付
            </button>
          </div>
        </div>
      </div>
    </div>
    <BaseFooter />
  </div>
</template>
<script>
import BaseHeader from "@/components/baseHeader.vue";
import BaseFooter from "@/components/baseFooter.vue";
export default {
  name: "purchase",
  components: { BaseHeader, BaseFooter },
  data() {
    return {
      navs: ["首页", "新闻", "题库", "资料", "产教课程"],
      activeNav: "登录",
      orderNumber: '277839287166637',
      courseName: '视频【880视频】PMP视频教程-罗老师',
      validity: 365,
      price: 880.00,
      countdown: 43191, // 11小时59分51秒，单位：秒
      selectedMethod: 'wechat',
      agreementChecked: false,
      paymentMethods: [
        { id: 'wechat', name: '微信支付', icon: require('@/assets/index/weixin.png') },
        { id: 'alipay', name: '支付宝', icon: require('@/assets/index/zhifubao.png') },
        { id: 'huabei', name: '花呗', icon: require('@/assets/index/huabei.png') },
        { id: 'jd', name: '京东支付', icon: require('@/assets/index/jingdong.png') },
        { id: 'kela', name: '克拉码支付', icon: require('@/assets/index/duihuanma.png') },
        { id: 'company', name: '对公汇款', icon: require('@/assets/index/trade@2x.png') },
      ]
    };
  },
  computed: {
    formatTime() {
      const hours = Math.floor(this.countdown / 3600);
      const minutes = Math.floor((this.countdown % 3600) / 60);
      const seconds = this.countdown % 60;
      return `${hours}小时${minutes}分${seconds}秒`;
    }
  },
  methods: {
    selectPaymentMethod(methodId) {
      this.selectedMethod = methodId;
    },
    handlePayment() {
      if (!this.agreementChecked) return;
      // TODO: 实现支付逻辑
      console.log('开始支付，选择的支付方式：', this.selectedMethod);
    },
    startCountdown() {
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(timer);
          // TODO: 处理订单超时逻辑
        }
      }, 1000);
    },
    handleCopy() {
      const el = document.createElement('textarea');
      el.value = this.orderNumber;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      alert('复制成功');
    }
  },
  mounted() {
    this.startCountdown();
  }
};
</script>
<style scoped lang="scss">
.purchase-page {
  .purchase {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 70px;

    &-container {
      max-width: 800px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 8px;
      padding: 20px;
    }

    .order-number {
      text-align: right;
      font-size: 14px;
      color: #1664FF;
      display: flex;
      align-items: center;
      justify-content: end;
      border-bottom: 1px solid #E9E6F2;
      padding-bottom: 24px;

      .copy-order-number {
        padding: 3px 4px;
        color: #666;
        border-radius: 20px;
        border: 1px solid #979797;
        cursor: pointer;
        margin-left: 10px;
      }
    }

    .payment-status {
      text-align: center;
      margin: 30px 0;

      h1 {
        font-size: 24px;
        color: #333;
      }
    }

    .order-info {

      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      text-align: left;

      .order-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 15px;
      }

      .course-info {
        display: flex;
        background-color: #f8f9fc;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        padding: 20px;

        .course-name {
          flex: 1;
          font-size: 14px;
          font-weight: 600;
        }

        .validity {
          color: #666;
          margin-top: 10px;
        }

        .price {
          color: #ff4d4f;
          font-size: 18px;
          font-weight: bold;
        }
      }

      .course-period {
        color: #666;
        font-size: 14px;
      }
    }

    .payment-methods {
      margin-bottom: 20px;
      width: 93%;
      margin-left: 3%;

      .method-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 15px;
      }

      .methods-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
      }

      .method-item {
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        padding: 10px;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s;

        &.active {
          border-color: #1664FF;
          background-color: #e6f7ff;
        }

        img {
          width: 24px;
          height: 24px;
          margin-right: 8px;
        }

        span {
          font-size: 14px;
        }
      }
    }

    .payment-footer {
      border-top: 1px solid #e8e8e8;
      padding-top: 20px;

      .agreement {
        margin-bottom: 20px;
        text-align: right;

        input[type="checkbox"] {
          margin-right: 8px;
        }

        .agreement-link {
          color: #1890ff;
          cursor: pointer;
        }
      }

      .payment-action {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .total-amount {
          margin-right: 20px;
          font-size: 14px;

          .amount {
            color: #ff4d4f;
            font-size: 24px;
            font-weight: bold;
          }
        }

        .pay-button {
          background-color: #1664FF;
          color: white;
          border: none;
          padding: 10px 30px;
          border-radius: 4px;
          cursor: pointer;
          font-size: 16px;

          &:disabled {
            background-color: #d9d9d9;
            cursor: not-allowed;
          }

          &:hover:not(:disabled) {
            background-color: #1664FF;
          }
        }
      }
    }
  }
}
</style>
